<template>
  <div
    class="echarts-bar1-wrap"
    ref="dotLineChart"
    style="height: 100%; width: 100%;"
    @mouseover="stop"
    @mouseout="start"
  ></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'EchartsBar1Wrap',
  /**
   * xData x坐标值
   * yData y轴坐标
   * areaColor 图例背景色
   * color: 图例颜色
   * unit 纵轴单位
   * title: 标题
   * legend: name: 图例名称 color: 表示颜色
   *
   */
  props: {
    xData: {
      type: Array,
      default: () => {
        return ['2017', '2018', '2019', '2020', '2021']
      }
    },
    yData: {
      type: Array,
      default: () => {
        return [
          [1, 4, 8, 3, 4],
          [2, 3, 7, 4, 3]
        ]
      }
    },
    type: {
      type: Array,
      default: () => ['bar', 'bar']
    },
    // 可修改项
    areaColor: {
      type: Array,
      default: () => ['RGBA(18, 142, 232, 1)', 'rgba(25, 194, 147, 1)']
    },
    title: {
      type: String,
      default: ''
    },
    unit: {
      type: String,
      default: ''
    },
    legend: {
      type: Array,
      default: () => ['资产数量', '同比']
    }
  },

  data () {
    return {
      chart: null,
      option: null,
      timer: null,
      max: 0,
      min: 0,
      seriesDatas: [],
      index: 0
    }
  },

  watch: {
    // 监听index变化实现自动切换
    index: {
      handler (i) {
        if (this.xData && i < this.xData.length) {
          this.$nextTick(() => {
            this.changeAuto(i)
          })
        } else {
          this.index = 0
        }
      },
      immediate: true
    }
  },

  created () {
    // 初始化图表数据
    this.seriesData()
  },

  mounted () {
    // 初始化图表
    this.$nextTick(() => {
      this.init()
      this.chart.resize()
    })
  },

  beforeDestroy () {
    // 销毁定时器
    clearTimeout(this.timer)
    // 销毁图表实例
    // this.chart.dispose()
  },

  methods: {
    seriesData () {
      const arr = []
      const areaColor = this.areaColor
      const that = this
      this.yData.forEach((item, i, ary) => {
        arr.push({
          name: that.legend[i],
          type: that.type[i],
          stack: 'truck',
          barWidth: 12,
          showSymbol: true,
          symbolSize: 10,
          animationDuration: 2000,
          animationEasing: 'elasticOut',
          color: areaColor[i],
          data: ary[i].map((item) => item)
        })
      })
      this.seriesDatas = arr
    },
    init () {
      this.chart = echarts.init(this.$refs.dotLineChart)
      const unit = this.unit
      this.option = {
        title: {
          text: `${this.title}`,
          x: 'center',
          textStyle: {
            color: '#fff',
            fontSize: 13,
            fontWeight: 400,
            fontFamily: 'PingFangMedium'
          },
          textAlign: 'left'
        },
        grid: {
          left: '0',
          right: '0',
          bottom: '0',
          top: '35',
          containLabel: true
        },
        legend: {
          show: true,
          x: 'center',
          textStyle: {
            fontSize: 13,
            color: '#666'
          },
          itemWidth: 16,
          itemHeight: 7
        },
        tooltip: {
          trigger: 'axis',
          borderWidth: 1,
          borderRadius: 12,
          padding: 0,
          confine: true,
          axisPointer: {
            type: 'shadow',
            lineStyle: {}
          },
          formatter: function (params, ticket, callback) {
            let res = ''
            res = `<div  style="background: linear-gradient(135deg, #EEF2F5, rgba(250,252,253,0.5));padding: 11px 16px;
                   border: 1px solid #FFFFFF;border-radius: 12px;">
                  <div style="font-size: 15px;font-family: Microsoft YaHei;font-weight: 400;color: #333333;margin-bottom: 4px">${
                    params[0].name
                  }</div>
                  ${params
                    .map((item, index) => {
                      return `
                    <div style="display: flex;justify-content: space-between">
                     <div><span style="display:inline-block;margin-right:5px;border-radius:10px;width:8px;height:8px;background-color:${item.color};border: 2px solid #fff"};></span><span style="font-size: 15px;font-family: Microsoft YaHei;font-weight: 400;color: #666666;">${item.seriesName}</span></div>
                     <div style="margin-left: 19px"><span style="font-size: 15px;font-family: FZZhengHeiS-EB-GB;font-weight: 400;color: #666666;">${item.data}</span><span style="font-size: 12px;font-family: Microsoft YaHei;font-weight: 400;color: #666666;">台</span></div>
                    </div>`
                    })
                    .join('')}
                  </div>`
            return res
          }
        },
        xAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'rgba(237, 239, 242, 1)'
            }
          },
          axisTick: {
            show: true,
            lineStyle: {}
          },
          axisLabel: {
            fontSize: 16,
            color: '#666666',
            fontFamily: 'Microsoft YaHei'
          }
        },
        yAxis: {
          name: `${unit}`,
          type: 'category',
          axisLabel: {
            textStyle: {
              fontSize: 16,
              color: '#666666',
              fontFamily: 'Microsoft YaHei'
            }
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: 'rgba(237, 239, 242, 1)'
            }
          },
          axisTick: {
            show: false
          },
          data: this.xData.map((item) => item)
        },
        series: this.seriesDatas
      }
      this.chart.clear(this.option)
      this.chart.setOption(this.option)
      const that = this
      window.addEventListener('resize', function () {
        that.chart.resize()
      })
      // const that = this
      // that.chart.on('mouseover', function (params) {
      //   clearTimeout(that.timer)
      // })
      // that.chart.on('mouseout', function (params) {
      //   clearTimeout(that.timer)
      //   that.changeAuto(that.index)
      // })
    },
    changeAuto (i) {
      const that = this
      that.timer = setTimeout(function () {
        if (that.index < that.xData.length) {
          that.chart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: that.index
          })
          that.index++
        } else {
          that.index = 0
        }
      }, 2000)
    },
    start () {
      this.changeAuto(this.index)
    },
    stop () {
      clearTimeout(this.timer)
    }
  }
}
</script>

<style lang="scss" scoped>
// .echarts3-wrap {
// }
</style>
